<script lang="ts" setup>
import { ref } from 'vue'
import LayoutContainer from '@/components/layout-container/index.vue'

const pageSize4 = ref(100)
const currentPage4 = ref(4)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const form = ref({
  name: '',
})

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<template>
  <layout-container leftTitle="测试" rightTitle="测试">
    <!-- left树插槽 -->
    <template #left-btn>
      <button class="btn_operation">测试</button>
    </template>
    <template #left>
      <button class="btn_operation_add">新增</button>
      <button class="btn_operation_delete">删除</button>
      <button class="btn_operation_editor">删除</button>
      <button class="btn_operation_yjcs">一键测试</button>
      <button class="btn_operation_upload">上传</button>
      <button class="btn_operation_last">上一步</button>
      <button class="btn_operation_big">放大</button>
      <button class="btn_operation_small">缩小</button>
    </template>
    <template #right-btn>
      <button class="btn_operation">测试</button>
    </template>
    <template #form>
      <el-form :model="form" label-width="50px" class="form">
        <el-form-item label="测试" class="form-item">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="测试" class="form-item">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="测试" class="form-item">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="测试" class="form-item">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="" class="form-item-btn">
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #table>
      <el-table :data="tableData" style="width: 100%" height="100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </template>
    <template #page>
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </template>
  </layout-container>
</template>
<style lang="scss" scoped>
.form {
  width: 100%;
  .form-item {
    width: 25%;
    float: left;
  }
  .form-item-btn {
    float: right;
  }
}
</style>
